<script>
// import { getCurrentInstance } from 'vue'
import { reactive, ref, toRefs } from 'vue'
// const { ctx } = getCurrentInstance()
// const instance = getCurrentInstance()
// const _this = instance.appContext.config.globalProperties
export default {
  name: 'NewRoom',
  setup () {
    // 楼盘tab栏数据
    const tabsLists = reactive({
      tabsList: [
        { title: '全部楼盘' },
        { title: '优惠楼盘' },
        { title: '品牌楼盘' }
      ]
    })
    // 楼盘数据
    const buildings = reactive({
      buildingList: [
        {
          imgUrl: '',
          title: '中铁建信达花语天宸',
          status: ['在售', '售磬', '商铺', '商业楼', '待售', '别墅', '写字楼', '住宅'],
          address: '黄埔/科学城/广汕公路与班岭路交叉西南420米黄埔/科学城/广汕公路与班岭路交叉西南420米',
          info: '3室/4室',
          info2: '97-168m²',
          phone: '4008017518 转 81273',
          price: '47000'
        },
        {
          imgUrl: '',
          title: '中铁建信达花语天宸',
          status: ['在售', '售磬', '商铺', '商业楼', '待售', '别墅', '写字楼', '住宅'],
          address: '黄埔/科学城/广汕公路与班岭路交叉西南420米黄埔/科学城/广汕公路与班岭路交叉西南420米',
          info: '3室/4室',
          info2: '97-168m²',
          phone: '4008017518 转 81273',
          price: '47000'
        },
        {
          imgUrl: '',
          title: '中铁建信达花语天宸',
          status: ['在售', '售磬', '商铺', '商业楼', '待售', '别墅', '写字楼', '住宅'],
          address: '黄埔/科学城/广汕公路与班岭路交叉西南420米黄埔/科学城/广汕公路与班岭路交叉西南420米',
          info: '3室/4室',
          info2: '97-168m²',
          phone: '4008017518 转 81273',
          price: '47000'
        },
        {
          imgUrl: '',
          title: '中铁建信达花语天宸',
          status: ['在售', '售磬', '商铺', '商业楼', '待售', '别墅', '写字楼', '住宅'],
          address: '黄埔/科学城/广汕公路与班岭路交叉西南420米黄埔/科学城/广汕公路与班岭路交叉西南420米',
          info: '3室/4室',
          info2: '97-168m²',
          phone: '4008017518 转 81273',
          price: '47000'
        },
        {
          imgUrl: '',
          title: '中铁建信达花语天宸',
          status: ['在售', '售磬', '商铺', '商业楼', '待售', '别墅', '写字楼', '住宅'],
          address: '黄埔/科学城/广汕公路与班岭路交叉西南420米黄埔/科学城/广汕公路与班岭路交叉西南420米',
          info: '3室/4室',
          info2: '97-168m²',
          phone: '4008017518 转 81273',
          price: '47000'
        },
        {
          imgUrl: '',
          title: '中铁建信达花语天宸',
          status: ['在售', '售磬', '商铺', '商业楼', '待售', '别墅', '写字楼', '住宅'],
          address: '黄埔/科学城/广汕公路与班岭路交叉西南420米黄埔/科学城/广汕公路与班岭路交叉西南420米',
          info: '3室/4室',
          info2: '97-168m²',
          phone: '4008017518 转 81273',
          price: '47000'
        },
        {
          imgUrl: '',
          title: '中铁建信达花语天宸',
          status: ['在售', '售磬', '商铺', '商业楼', '待售', '别墅', '写字楼', '住宅'],
          address: '黄埔/科学城/广汕公路与班岭路交叉西南420米黄埔/科学城/广汕公路与班岭路交叉西南420米',
          info: '3室/4室',
          info2: '97-168m²',
          phone: '4008017518 转 81273',
          price: '47000'
        },
        {
          imgUrl: '',
          title: '中铁建信达花语天宸',
          status: ['在售', '售磬', '商铺', '商业楼', '待售', '别墅', '写字楼', '住宅'],
          address: '黄埔/科学城/广汕公路与班岭路交叉西南420米黄埔/科学城/广汕公路与班岭路交叉西南420米',
          info: '3室/4室',
          info2: '97-168m²',
          phone: '4008017518 转 81273',
          price: '47000'
        },
        {
          imgUrl: '',
          title: '中铁建信达花语天宸',
          status: ['在售', '售磬', '商铺', '商业楼', '待售', '别墅', '写字楼', '住宅'],
          address: '黄埔/科学城/广汕公路与班岭路交叉西南420米黄埔/科学城/广汕公路与班岭路交叉西南420米',
          info: '3室/4室',
          info2: '97-168m²',
          phone: '4008017518 转 81273',
          price: '47000'
        },
        {
          imgUrl: '',
          title: '中铁建信达花语天宸',
          status: ['在售售磬', '售磬售磬', '商铺售磬', '商业售磬', '待售磬', '别墅售磬'],
          address: '黄埔/科学城/广汕公路与班岭路交叉西南420米黄埔/科学城/广汕公路与班岭路交叉西南420米',
          info: '3室/4室',
          info2: '97-168m²',
          phone: '4008017518 转 81273',
          price: '47000'
        }
      ]
    })
    // 分页器
    const pagination = reactive({
      // 分页器页数
      page: 2,
      // 每一页显示的数据
      limit: 10,
      // 总共多少条
      total: 22394,
      // 类型
      type: 1,
      message: 1
    })
    // 分页器数据
    const getPage = (page) => {
      pagination.page = page
      // 再次请求数据
      // getMessageList(pagination)
    }
    // 排序规则
    const sortRules = ref('价格')
    const sortRules2 = ref('开盘时间')
    const unit = ref('万/米')
    return {
      pagination,
      sortRules,
      sortRules2,
      unit,
      ...toRefs(tabsLists),
      ...toRefs(buildings),
      getPage
    }
  }
}
</script>
<template>

  <div class="new_room">
    <SearchNav />
    <div class="container">
      <!-- total楼盘数据 sortRules排序的规则1 sortRules2排序的规则2 ,tabsList选项栏数据 ,buildingList楼盘列表数据 ,unit楼盘列表的结算单位 -->
      <TabSortBuildingList :total="pagination.total" :sortRules="sortRules" :tabsList="tabsList"
        :unit='unit' :buildingList="buildingList" :sortRules2="sortRules2" />
      <RankingList />
    </div>
    <div class="pagination">
      <Pagination :pageNo="pagination.page" :limit="pagination.limit" :total="pagination.total"
        :continues="5" @getPageNo='getPage' />
    </div>
  </div>
</template>
<style lang='less'>
.new_room {
  width: 1920px;
  margin: 0 auto;
  .container {
    width: 1180px;
    margin: 0 auto;
    display: flex;
  }
  .pagination {
    width: 1180px;
    margin: 29px auto 98px;
  }
}
</style>
